<template>
  <div class="tool" :style="themeColor">
    <span class="settings" title="返回">
      <icon-undo :size="20" @click="backpage"/>
    </span>
    <span class="settings" title="退出登录">
      <icon-export :size="20" @click="visible = true"/>
    </span>
    <span class="settings" title="添加文件夹">
      <icon-folder-add :size="20" @click="AddFoldervisible = true"/>
    </span>
    <span class="settings" title="新增收藏">
      <icon-plus-circle :size="20" @click="Add"/>
    </span>
    <span class="settings" :title="theme==='dark'?'亮':'暗'">
      <icon-sun-fill :size="20" @click="UpdateWindowColor(false)" v-if="theme==='dark'"/>
      <icon-moon-fill :size="20" @click="UpdateWindowColor(true)" v-else/>
    </span>
    <span class="settings" title="搜索">
      <a-input-search
          :style="{width:'200px'}"
          @press-enter="search"
          @search="search"
          v-model="keyword"
          placeholder="输入搜索内容"/>
    </span>
  </div>
  <a-modal :mask-closable="false" :width="300" draggable :visible="visible" @cancel="visible=false" @ok="handleOk">
    <template #title>
      提示
    </template>
    <div>
      确认退出登录吗？
    </div>
  </a-modal>
  <a-modal :mask-closable="false" :visible="Addvisible" @cancel="Addcancel" @ok="AddhandleOk" draggable>
    <template #title>添加收藏数据</template>
    <a-form :model="addCollect" :style="{width:'400px'}" ref="formRef">
      <a-form-item label="名称">
        <a-input v-model="addCollect.bname" placeholder="请输入名称"/>
      </a-form-item>
      <a-form-item label="介绍">
        <a-input v-model="addCollect.bexplain" placeholder="请填写链接介绍"/>
      </a-form-item>
      <a-form-item label="链接">
        <a-input v-model="addCollect.burl" placeholder="请填写链接地址"/>
      </a-form-item>
      <a-form-item label="文件夹">
        <a-select :default-active-first-option="true" v-model="addCollect.foldername" placeholder="请选择文件夹">
          <a-option v-for="item of userFolderAll" :value="item" :label="item" />
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal :mask-closable="false" :width="350" :visible="AddFoldervisible" @cancel="AddFoldervisible=false;addFolder=''" @ok="AddFolderOk" draggable>
    <template #title>添加文件夹</template>
    <a-input v-model="addFolder" placeholder="请输入文件夹名称"/>
  </a-modal>
</template>

<script setup lang="ts">
import UseWindowsInfo from "../../hooks/UseWindowsInfo";
import {reactive, Ref, ref} from "vue";
import Cx_Bus from "../../common/Utils/MittUtils";
import useUserInfo from "../../hooks/UseUserInfo";
import {CollectType} from "../../common/Type/CollectType";
import CXMessageUtils from "../../common/Utils/CXMessageUtils";
import {RequestUtils} from "../../common/Utils/RequestUtils";
import route from "../../route";

// 是否退出的弹窗
const visible: Ref<boolean> = ref(false)
// 添加文件夹弹窗是否显示的变量
const AddFoldervisible: Ref<boolean> = ref(false)
// 添加数据的弹窗
const Addvisible: Ref<boolean> = ref(false)
// 搜索的关键字
let keyword: Ref<string> = ref<string>("")
// 添加文件夹
const addFolder = ref("")
// 添加数据的表单
const formRef = ref()
// 添加数据的类
const addCollect: CollectType = reactive({} as CollectType)
// 用户的所有文件夹名称
const userFolderAll = ref<string[]>([])

// 窗口信息
const {theme, themeColor, UpdateWindowColor} = UseWindowsInfo()
// 退出登录
const {logOut} = useUserInfo()


/**
 * 搜索
 */
const search = (): void => {
  Cx_Bus.emit("Tool-Search", keyword.value)
}
/**
 * 退出登录
 */
const handleOk = (): void => {
  logOut()
}
/**
 * 添加数据的弹窗按钮
 */
const Add = (): void => {
  GetFolderNameAll().then(()=>{
    if (userFolderAll.value.length<1){
      CXMessageUtils.CX_Warning("请先添加文件夹在进行添加网页收藏")
      return
    }
    CXMessageUtils.CX_Success("加载中，请稍后！")
    Addvisible.value = true
  })
}
/**
 * 添加数据
 * @constructor
 */
const AddhandleOk = (): void => {
  if (!addCollect.bname) {
    CXMessageUtils.CX_Warning("请输入名称")
    return;
  }
  if (!addCollect.bexplain) {
    CXMessageUtils.CX_Warning("请输入链接介绍")
    return;
  }
  if (!addCollect.burl) {
    CXMessageUtils.CX_Warning("请输入链接地址")
    return;
  }
  if (!addCollect.foldername) {
    CXMessageUtils.CX_Warning("请选择文件夹")
    return;
  }
  RequestUtils({
    url: "Collect/AddUserCollect",
    method: "post",
    data: addCollect
  }).then(() => {
    Addvisible.value = false
    addCollect.bexplain = ""
    addCollect.burl = ""
    addCollect.bname = ""
    addCollect.foldername = ""
    CXMessageUtils.CX_Success("收藏成功")
    Cx_Bus.emit("Tool-AddData", Addvisible.value)
  })
}
const Addcancel = (): void => {
  Addvisible.value = false
  addCollect.bexplain = ""
  addCollect.burl = ""
  addCollect.bname = ""
}
/**
 * 返回
 */
const backpage = (): void => {
  route.go(-1)
}
/**
 * 添加文件夹
 * @constructor
 */
const AddFolderOk = (): void => {
  if (!addFolder.value) {
    CXMessageUtils.CX_Warning("请填写文件夹的名称！");
    return;
  }
  RequestUtils({
    url: `Folder/AddFolder?name=${addFolder.value}`,
    method: "get"
  }).then(() => {
    CXMessageUtils.CX_Success("新增成功");
    AddFoldervisible.value = false
    Cx_Bus.emit("Tool-AddFolderOk",addFolder.value)
    addFolder.value = ""
  })
}
/**
 * 获取用户所有的文件夹名称
 * @constructor
 */
const GetFolderNameAll = ()=>{
  return new Promise((resolve,reject)=>{
    RequestUtils({
      url: `Folder/GetFolderNameAll`,
      method: "get"
    }).then(data => {
      userFolderAll.value = data as any
      resolve(data as any)
    }).catch(err=>{
      reject(err)
    })
  })
}
</script>

<style scoped>
.tool {
  background-color: #000000;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  color: skyblue;
  text-align: right;
  padding: 0 8px;

  .settings {
    padding: 0 8px;
  }
}
</style>
